<!DOCTYPE html>
<html chrome_comp_test="child_overflow_container">
<head>
<style>
/**
 * These styles and INS tag will make test case clear, remove them has no effect
 * on test results.
*/
div {padding:5px; border:1px solid black;}
ins {display:block; text-decoration:none;}
</style>
<style>
#pseudo:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}
</style>
</head>
<body>

<h1>RD1002 the_contents_overflow_the_container</h1>

<p>1.</p>
<div style="width:500px; height:150px;" expectedProblems="RD1002">
  <ins>div width:500px; height:150px;</ins>
  <div expectedProblems="RD1002">
    <ins>div</ins>
    <div style="width:800px; height:50px;">div width:800px; height:50px;</div>
    <div style="width:800px; height:50px;">div width:800px; height:50px;</div>
  </div>
  <div style="width:800px; height:50px;">div width:800px; height:50px;</div>
</div>
<br>
<br>
<br>
<br>
<br>

<p>2.</p>
<div style="width:500px; height:150px; direction:rtl;">
  <ins>div width:500px; height:150px; direction:rtl;</ins>
  <div expectedProblems="RD1002">
    <ins>div</ins>
    <div style="width:800px; height:50px;">div width:800px; height:50px;</div>
  </div>
</div>

<p>3.</p>
<div style="width:500px; height:150px; overflow-y:scroll;" expectedProblems="RD1002">
  <ins>div width:500px; height:150px; overflow-y:scroll;</ins>
  <div style="width:800px; height:100px;">div width:800px; height:100px;</div>
</div>

<p>4.</p>
<div style="width:500px; height:100px; padding:30px;" expectedProblems="RD1002">
  <ins>div width:500px; height:100px; padding:30px;</ins>
  <div style="width:500px; height:100px;">div width:500px; height:100px;</div>
</div>

<p>5.</p>
<div style="width:300px; height:100px;" expectedProblems="RD1002">
  <ins>div width:300px; height:100px;</ins>
  <div style="float:left; width:500px; height:100px;">div float:left; width:500px; height:100px;</div>
</div>
<br>
<br>
<br>
<br>
<br>

<p>6.</p>
<div style="position:absolute; width:500px; height:100px;" expectedProblems="RD1002">
  <ins>div position:absolute; width:500px; height:100px;</ins>
  <div style="margin-top:35px; left:35px; width:200px; height:80px;">div margin-top:35px; left:35px; width:200px; height:80px;</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<p>7. Margin collapsed in Chrome, but not in IE6 IE7(Q) IE8(Q).</p>
<div style="width:500px; height:100px; border-style:none; padding:0; background:silver;" expectedProblems="RD1002">
  <div style="width:500px; height:100px; margin:50px 0; border-style:none; padding:0; background:gold;">div width:500px; height:100px; &gt; div width:500px; height:100px; margin:50px 0;</div>
</div>
<br>
<br>
<br>
<br>
<br>

<h2>The followings have no problems</h2>
<p>A1.</p>
<div style="width:500px; height:150px; overflow-x:scroll;">
  <ins>div width:500px; height:150px; overflow-x:scroll;</ins>
  <div style="width:800px; height:100px;">div width:800px; height:100px;</div>
</div>

<p>A2.</p>
<div style="width:500px; height:150px;">
  <ins>div width:500px; height:150px;</ins>
  <div style="width:300px; height:80px;">div width:300px; height:80px;</div>
</div>

<p>A3.</p>
<div id="pseudo" style="width:500px; height:150px;">
  <ins>div width:500px; height:150px; [+pseudo]</ins>
  <div style="width:300px; height:80px;">div width:300px; height:80px;</div>
</div>

<p>A4.</p>
<div style="width:500px; height:150px;">
  <ins>div width:500px; height:150px;</ins>
  <div style="float:right; width:300px; height:50px; margin-right:-50px;">div float:right; width:300px; height:50px; margin-right:-50px;</div>
</div>

<p>A5.</p>
<div style="width:500px;">
  <ins>div width:500px;</ins>
  <div>
    <ins>div</ins>
    <div>
      <ins>div</ins>
      <div style="position:relative; left:-30px; right:200px; bottom:200px; top:-10px;">position:relative; left:-30px; right:200px; bottom:200px; top:-10px;</div>
      <div style="position:relative; right:-100px;">position:relative; right:-100px;</div>
    </div>
  </div>
</div>

<p>A6.</p>
<div style="width:300px; height:100px;">
  <ins>div width:300px; height:100px;</ins>
  <div style="float:left; width:200px; height:50px; position:relative; right:-100px;">div float:left; width:200px; height:50px; position:relative; right:-100px;</div>
</div>

<p>A7.</p>
<div style="width:500px; height:150px;">
  <ins>div width:500px; height:150px;</ins>
  <div style="position:absolute; margin-top:50px; left:50px; width:400px; height:100px;">div position:absolute; margin-top:50px; left:50px; width:400px; height:100px;</div>
</div>
<br>
<br>
<br>
<br>
<br>

<p>A8. Margin collapsed both in Chrome and IE6 IE7(Q) IE8(Q).</p>
<div style="border-style:none; padding:0; background:silver;">
  <div style="width:500px; height:100px; margin:50px 0; border-style:none; padding:0; background:gold;">div &gt; div width:500px; height:100px; margin:50px 0;</div>
</div>

<p>A9.1. Bad coding practice: Forget clear float. (1)</p>
<div style="width:500px;">
  <ins>div width:500px;</ins>
  <div style="border-style:none; padding:0;">
    <div style="float:left; width:300px; height:100px;">div &gt; div float:left; width:300px; height:100px;</div>
  </div>
  <div style="clear:both;">
    <ins>div clear:both;</ins>
  </div>
</div>

<p>A9.2. Bad coding practice: Forget clear float. (2)</p>
<div style="width:500px; height:200px; position:relative;">
  <ins>div width:500px; height:200px; position:relative;</ins>
  <div style="border-style:none; padding:0;">
    <div style="float:left; width:300px; height:100px;">div &gt; div float:left; width:300px; height:100px;</div>
  </div>
  <div style="position:absolute; top:10px;">
    <ins>div position:absolute; top:10px;</ins>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>

</body>
</html>
